<template>
  <view class="authorize-box" :class="{ hidden: !desRemark }">
    <view class="authorize">
      <view class="authorize-des">请设置允许访问您的{{ desRemark }}</view>
      <view class="authorize-btns">
        <button class="button" v-if="!must" plain @tap="onClose">取消</button>
        <button class="button" type="primary" plain open-type="openSetting" @opensetting="onOpensetting">去设置</button>
      </view>
    </view>
  </view>
</template>
<script setup lang="jsx">
import { View } from '@tarojs/components';
import { ref, watch } from 'vue';
var scopeOptions = {
  getUserInfo: 'scope.userInfo',
  chooseLocation: 'scope.userLocation',
  getLocation: 'scope.userLocation',
  openLocation: 'scope.userLocation',
  chooseInvoiceTitle: 'scope.invoiceTitle',
  getWeRunData: 'scope.werun',
  startRecord: 'scope.record',
  operateRecorder: 'scope.record',
  saveImageToPhotosAlbum: 'scope.writePhotosAlbum',
  saveVideoToPhotosAlbum: 'scope.writePhotosAlbum',
  chooseAddress: 'scope.address'
};
var msgMap = {
  'scope.userLocation': '地理位置',
  'scope.writePhotosAlbum': '相册',
  'scope.userInfo': '用户信息',
  'scope.record': '录音功能',
  'scope.werun': '运动步数',
  'scope.invoiceTitle': '发票抬头',
  'scope.address': '收货地址'
};
const props = defineProps({
  must: Boolean,
  err: Object
});

let scope = '';

const desRemark = ref('');

watch(
  () => props.err,
  () => {
    let errMsg = props.err?.errMsg;
    if (errMsg) {
      if (errMsg.indexOf(':fail auth deny') > 0) {
        var key = errMsg.substr(0, errMsg.indexOf(':fail auth deny'));
        scope = scopeOptions[key];
        desRemark.value = msgMap[scope];
        return;
      }
    }
    desRemark.value = '';
  }
);

const emit = defineEmits(['close']);
const onClose = () => {
  emit('close');
};
const onOpensetting = () => {
  emit('close');
};
</script>
<style lang="scss">
.authorize-box {
  display: block;
  position: fixed;
  top: 0px;
  left: 0px;
  width: 750rpx;
  height: 100%;
  z-index: 999;
  background-color: rgba(0, 0, 0, 0.4);
  &.hidden {
    display: none;
  }
  .authorize {
    background-color: var(--color-caption);
    width: 580px;
    margin: 58% auto;
    text-align: center;
    padding-top: 50px;
  }
  .authorize-title {
    padding: 0 30px 20px;
    font-size: 36px;
  }
  .authorize-des {
    padding-bottom: 50px;
    color: var(--color-gray);
  }
  .authorize-btns {
    display: flex;
    justify-content: space-between;
  }
  .authorize-btns .button {
    width: 50%;
    flex-grow: 1;
    border-radius: 0px;
    box-shadow: none !important;
    margin: 0;
    &::after,
    &::before {
      content: none;
    }
  }
}
</style>
